$(() => {
  const { form, laypage } = layui
  // 查询参数q
  const q = {
    pagenum: 1,  //页面值
    pagesize: 3, //每页数量
    cate_id: '', //文章分类的    ''代表没有筛选条件, 拿所有类别
    state: '', // 文章的状态  '' 代表所有状态
  }
  // 定义一个模板引擎的过滤器
  template.defaults.imports.timestamp = function (value) {
    return moment(value).format('YYYY-MM-DD HH:mm:ss')
  };
  // 定义渲染页面的函数
  function initTable () {
    $.ajax({
      type: "get",
      url: "/my/article/list",
      data: q,
      success: function (res) {
        if (res.status != 0) return layer.msg('获取文章列表失败!');
        // layer.msg('获取文章列表成功!')
        // 判断res.data长度  如果为0, 说明这一页没数据了，让pagenum-1再查
        if (res.data.length === 0) {
          // 43页没数据了， 就去看42页的数据
          q.pagenum-- 
          if(q.pagenum !== 0) //页码为0, 就不发请求了
          initTable()
        }
        const html = template('tpl-table', res)
        $('tbody').html(html)
        renderPage(res.total)
      }
    });
  }
  // 定义渲染文章分类的函数
  function initCate () {
    $.ajax({
      type: "get",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status != 0) return layer.msg('获取文章分类失败!');
        const html = template('tpl-cate', res)
        $('[name=cate_id]').html(html)
        form.render(); //更新全部
      }
    });
  }
  initTable()
  initCate()

  // 给筛选按钮注册点击事件, 修改文章分类的和文章的状态
  $('#form-search').on('submit', function (e) {
    e.preventDefault();

    // 拿到文章分类数据, 修改q对用的参数
    const cate = $('[name="cate_id"]').val()
    q.cate_id = cate
    // 拿到文章的状态数据, 修改q对用的参数
    const state = $('[name="state"]').val()
    q.state = state
    // 重新发渲染的请求
    initTable()
  })

  // 封装一个分页器函数  total是后端给的
  function renderPage (total) {
    //执行一个laypage实例
    laypage.render({
      elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize,  // 每页条数, 可以计算出分页数
      curr: q.pagenum, //起始页, 后期会修改
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [2, 3, 5, 10],
      jump: function (obj, first) {  //页面刷新就触发jump(页面刷新触发initTable-->renderPage--->jump)
        // 修改q的pagenum
        q.pagenum = obj.curr
        // 修改q的pagesize
        q.pagesize = obj.limit
        //点击分页才会触发的逻辑
        if (!first) {
          // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
          // console.log(obj.limit); //得到每页显示的条数 
          // 发请求
          initTable()
        }
      }
    });
  }

  // 编辑注册点击事件
  $('body').on('click', '.edit', function (e) {
    const id = $(this).attr('data-id')
    location.href = '/article/art_pub.html?id=' + id
  })

  // 删除按钮注册点击事件
  $('body').on('click', '.btn-delete', function (e) {
    const id = $(this).attr('data-id')
    // 弹询问框
    layer.confirm('是否确定删除?', { icon: 3, title: '提示' }, function (index) {
      //确认删除， 发送ajax
      $.ajax({
        type: "get",
        url: "/my/article/delete/" + id,
        success: function (res) {
          if (res.status != 0) return layer.msg('删除文章失败!');
          layer.msg('删除文章成功!')
          // 重新渲染页面
          initTable()
        }
      });
      layer.close(index);
    });
  })
})

// echarts 如何实现自适应?
// eachars本质是svg图形这种技术写的, 用的根本就不是rem
// eachars提供一个重新渲染的函数, 只要页面触发resize事件, 重新调echarts的重新渲染的函数